<template>
  <div class="bg-white rounded-lg shadow p-6">
    <h2 class="text-xl font-bold mb-6">社区相册</h2>

    <!-- 按年月日分组的照片 -->
    <div v-for="(group, date) in groupedPhotos" :key="date" class="mb-8">
      <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">{{ date }}</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        <div
          v-for="(photo, index) in group"
          :key="index"
          class="aspect-square bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow duration-300 cursor-pointer"
          style="cursor: pointer;"
        >
          <div class="w-full h-full flex items-center justify-center relative">
            <img
              :src="photo.url"
              class="w-full h-full object-cover"
              alt="相册照片"
            >
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "CommunityAlbum",
  props: {
    communityId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      previewImageSrc: null,
      // Mock数据 - 实际项目中应该从API获取
      photos: [
        {
          id: 1,
          url: "https://picsum.photos/id/101/300/300",
          date: "2023-06-15"
        },
        {
          id: 2,
          url: "https://picsum.photos/id/102/300/300",
          date: "2023-06-15"
        },
        {
          id: 3,
          url: "https://picsum.photos/id/103/300/300",
          date: "2023-06-10"
        },
        {
          id: 4,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 5,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 6,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 7,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 8,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 9,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 10,
          url: "https://picsum.photos/id/104/300/300",
          date: "2023-06-10"
        },
        {
          id: 11,
          url: "https://picsum.photos/id/105/300/300",
          date: "2023-05-28"
        },
        {
          id: 12,
          url: "https://picsum.photos/id/106/300/300",
          date: "2023-05-28"
        },
        {
          id: 14,
          url: "https://picsum.photos/id/107/300/300",
          date: "2023-05-20"
        },
        {
          id: 15,
          url: "https://picsum.photos/id/108/300/300",
          date: "2023-05-20"
        },
        {
          id: 16,
          url: "https://picsum.photos/id/109/300/300",
          date: "2023-05-20"
        },
        {
          id: 17,
          url: "https://picsum.photos/id/110/300/300",
          date: "2023-05-15"
        }
      ]
    };
  },
  computed: {
    // 按日期分组照片
    groupedPhotos() {
      const groups = {};
      this.photos.forEach(photo => {
        const date = new Date(photo.date);
        const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;

        if (!groups[formattedDate]) {
          groups[formattedDate] = [];
        }
        groups[formattedDate].push(photo);
      });
      return groups;
    }
  },
  methods: {}
};
</script>

<style scoped>
.grid > div {
  transition: all 0.2s ease;
}

.grid > div:hover {
  transform: scale(1.02);
}

.fixed.inset-0 img {
  animation: zoomIn 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>